<template>
    <div class="wrapper">
        <swiper :options="swiperOption">
            <swiper-slide v-for="item in list" :key="item.id">
                <img class="swiper-img" :src="item.imgUrl" alt="">
            </swiper-slide>
           
            <div class="swiper-pagination"  slot="pagination"></div>
        </swiper>
    </div>
</template>
<script>
export default {
    props:{
        list:{
            type:Array,
            default(){
                return []
            }
        }
    },
    data(){
        return {
            swiperOption:{
                pagination: '.swiper-pagination',
                loop:true,
               
            }
        }
    }
}
</script>
<style lang="stylus" scoped>
.swiper >>> .swiper-pagination-bullet-active
  background: #fff
.wrapper
  width 100%
  height 0
  padding-bottom 40%
  .swiper-img
      width: 100%
</style>